<template>
  <div>
    <el-card>
    <!-- 搜索框和按钮 -->
    <el-row type="flex" justify="space-between" align="middle" style="margin: 8px 0 18px 0;">
      <el-col :span="12" class="inputSearch" style="display: flex;">
        <el-input
          v-model="searchQuery"
          placeholder="请输入用户信息"
          @input="handleSearch"
        ></el-input>
        <el-button type="primary" @click="handleSearch" style="margin-left: 10px;">搜索用户</el-button>
      </el-col>
    </el-row>

    <el-table
    :data="currentPageData"
    style="width: 100%;overflow-x: auto;overflow-y: auto;border-top: 2px solid #BBB;"
    >
      <el-table-column width="200px" prop="id" label="ID"></el-table-column>
      <el-table-column width="200px" prop="username" label="用户名"></el-table-column>
      <el-table-column width="200px" prop="nickname" label="昵称"></el-table-column>
      <el-table-column width="200px" prop="sex" label="性别"></el-table-column>
      <el-table-column width="200px" prop="age" label="年龄"></el-table-column>
      <el-table-column width="200px" prop="type" label="用户类型"></el-table-column>
      <el-table-column width="200px" prop="activationStatus" label="激活状态"></el-table-column>
      <el-table-column width="200px" prop="userInfo.phone" label="手机号"></el-table-column>
      <el-table-column width="200px" prop="userInfo.email" label="邮箱"></el-table-column>
      <el-table-column width="200px" label="粉丝数">
        <template slot-scope="scope">
          {{ scope.row.userInfo.fanCount }}
        </template>
      </el-table-column>
      <el-table-column width="200px" label="关注数">
        <template slot-scope="scope">
          {{ scope.row.userInfo.followrCount }} <!-- 注意：这里可能是followCount，而不是followrCount -->
        </template>
      </el-table-column>
      <el-table-column width="200px" label="发表数">
        <template slot-scope="scope">
          {{ scope.row.userInfo.postCount }}
        </template>
      </el-table-column>
      <el-table-column width="200px" label="图片故事发表数">
        <template slot-scope="scope">
          {{ scope.row.userInfo.storyCount }}
        </template>
      </el-table-column>
      <el-table-column width="200px" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column min-width="250" fixed="right" label="操作" style="display: flex;justify-content: space-between;">
        <template slot-scope="scope">
          <el-button type="primary" @click="showConfirmExect(scope.row)">限制使用</el-button>
          <el-button type="primary" @click="showConfirmBan(scope.row)">封禁用户</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 这个是限制用户确认框 -->
    <el-dialog
      title="确认操作"
      :visible.sync="confirmExect"
      width="40%"
      @cancel="confirmExect = false"
    >
      <span>您确定要执行此操作吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmExect = false;">取 消</el-button>
        <el-button type="primary" @click="handleConfirmExect">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 这个是限制确认框 -->
    <el-dialog
      title="确认操作"
      :visible.sync="confirmBan"
      width="40%"
      @cancel="confirmBan = false"
    >
      <span>您确定要执行此操作吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmBan = false;">取 消</el-button>
        <el-button type="primary" @click="handleConfirmBan">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页组件 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </el-card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      searchQuery: '', // 搜索框输入
      total: 0, // 数据总数
      currentPage: 1, // 当前页码
      pageSize: 10, // 页面展示数据条数

      // 用户数据
      currentPageData: [],

      // 限制使用弹窗
      confirmExect: false,

      // 封禁用户弹窗
      confirmBan: false,

      // 临时用户ID信息
      tempId: ''

    }
  },

  // 一进页面就渲染数据
  mounted () {
    this.fetchData()
  },

  methods: {

    // 获取当前页码信息
    async fetchData () {
      try {
        axios.get('http://localhost:8080/pixington/system/user/page?page=1&size=10&username=lzy&nickname=程序员&phone=13435923905&email=640565640@qq.com', {
          page: this.currentPage,
          size: this.size
        })
          .then((response) => {
            this.currentPageData = response.data.list
            this.total = response.data.total
          })
          .catch((err) => {
            console.log(err)
          })
      } catch (err) {
        console.log(err)
      }
    },

    // 切换页码请求新数据
    handleCurrentChange (val) {
      this.currentPage = val
      // 重新渲染
      this.fetchData()
    },

    // 搜索用户
    async handleSearch () {
      // 如果用户输入为空，即返回当前页面信息
      if (this.searchQuery.trim() === '') {
        // console.log('用户清空了输入')
        // 重新渲染列表
        this.fetchData()
        return
      }
      // 如果用户输入，并点击了搜索，即返回搜索的信息
      // console.log(this.searchQuery)
      await axios.post('http://localhost:8080/pixington/system/user/page?page=1&size=10&username=lzy&nickname=程序员&phone=13435923905&email=640565640@qq.com', {
        params: {
          page: this.currentPage,
          size: this.pageSize,
          username: this.searchQuery,
          nickname: this.searchQuery,
          phone: this.searchQuery,
          email: this.searchQuery
        }
      })
        .then((response) => {
          // 把后端返回的数据赋给搜索
          this.currentPageData = response.data
        })
        .catch((err) => {
          this.$message({
            message: err,
            type: 'warning',
            duration: 2000
          })
        })
    },

    // 这个是限制用户弹窗
    showConfirmExect (row) {
      // 显示
      this.confirmExect = true
      // 临时保存id
      this.tempId = row.id
    },

    // 这个是限制用户逻辑
    async handleConfirmExect () {
      await axios.put('http://localhost:8080/pixington/system/user/limit/1750809679379828739', {
        id: this.tempId
      })
        .then((response) => {
          // 重新渲染
          this.fetchData()
          // 关闭弹窗
          this.confirmExect = false

          // 显示成功信息
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 2000
          })
        })
        .catch((err) => {
          // console.log(err)
          // 显示失败信息
          this.$message({
            message: err,
            type: 'success',
            duration: 2000
          })

          this.confirmExect = false
        })
    },

    // 这个是封禁用户弹窗
    showConfirmBan (row) {
      // console.log(row.id)
      // 打开弹窗
      this.confirmBan = true
      // 保存临时的值
      this.tempId = row.id
    },

    // 这个是封禁用户逻辑
    async handleConfirmBan () {
      await axios.put('http://localhost:8080/pixington/system/user/ban/1750809679379828739', {
        id: this.tempId
      })
        .then((response) => {
          // 重新渲染
          this.fetchData()
          // 关闭弹窗
          this.confirmBan = false

          // 显示成功信息
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 2000
          })
        })
        .catch((err) => {
          // 显示失败信息
          this.$message({
            message: err,
            type: 'success',
            duration: 2000
          })

          this.confirmBan = false
        })
    }

  }
}
</script>

<style>

</style>
